.top{
    position: absolute;
    height: 150px;
    width: 80%;
}

.container{
    background: white;
    display: flex;
    overflow:auto;
    // height: 1000px;
    box-shadow: 0px 10px 10px grey;
    .container_head {
        width: 100%;
        height: 70px;
        line-height:70px;
        background-color: #fff;
        border-bottom:1px solid gray;
        .marginTop{
            display: flex;
        height: 70px;

        }
          
        .title{
          padding: 10px;
          font-weight: bold;
          width:30%;  
          font-size: 20px;
          margin-left: 10%;
        }
        .mine{
          padding: 2.5px;
          float: right;
          border-radius: 20px;
          width: 40%;
          margin-right: 10%;
        }  
        }
      

    .left{
        width:10%;
        height:100%;
        text-align: center;
    }
    .main{
        width:65%;
        height:100%;
        padding-bottom: 20px;
        margin-bottom:20px;
        // overflow:auto;
    }
    .right{
        width:25%;
        height:95%;
        border-radius: 2px;
        // margin-top: 90px;
        background: rgb(248,248,248);
        margin-left: 10px;
        overflow: hidden;
        .box{
            cursor:pointer;
             width: 100%;
                // width:200px;
            height:620px;
            // border: 1px solid black;
            .title{
                font-weight: bold;
                font-size: 20px;
                margin:4%;
            }
            .book{
                border-bottom: 1px solid grey;
                height: 60px;
                width: 100%;
                padding-left: 20px;
                .con{
                    display: flex;
                    .booknumber{
                        font-weight: bold;
                        font-size: 20px;
                        color: rgb(255,24,62);
                    }
                    .bookname{
                        font-weight: bold;
                        font-size: 20px;
                    }
                }
                .remark{
                    font-weight: bold;
                    font-size: 10px;
                    color: rgba(128, 128, 128, 0.747);
                }
            }

        }
        .book :hover{
            transform: translateY(-5px);
        }

    }
   .main{
     width:90%;
     height:580px;  
    .card{
        .box{
            float: left;
            justify-content: space-between;
            // float: left;
            // border: 1px solid rgb(225,226,226);
            // border-radius: 10px;
            // background: rgb(239,240,244);
            height: 270px;
            width: 22%;
            margin:1%;
            .img{
                border: 1px solid  rgb(225,226,226);
                height: 180px;
                width: 100%;
                background-size:100% 100%;
                
            }
            .text{
                .book{
                    margin-left: 4%;
                    font-size: 16px;
                    font-weight: bold;
                }
                .name{
                    margin-left: 10px;
                    color: #ccc;
                }
                .remark{
                    margin-left: 4px;
                    padding-bottom:10px;
                    font-size: 8px;
                    display:none;
                }
            }
        }
        .box:hover{
            box-shadow: 5px 5px 5px #ccc,-5px 0px 5px #ccc;
            transform: translateY(-5px);
            transform: scale(1.1,1.1);
            // height: 280px;
            // width: 30%;
            z-index: 22;
                .remark{
                   
                    display:block;
                    
                    position: absolute;
                    bottom: 2px;
                    text-align:right;
                }
        }
    }
    .content{
        // border: 1px solid black;
        background: white;
        height: 600px;
        // padding: 20px;
        overflow-y: auto;

    }
   }

}   
    :global {
        .ant-btn-dashed{
            position: absolute;
            right: 10%;
            top: 6%;
            height: 6%;
            border-radius: 12px;
            font-size: 20px;
        }

    }
